<!DOCTYPE html>
<html>
<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>传智健康</title>
	<meta name="description" content="传智健康">
	<meta name="keywords" content="传智健康">
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../plugins/elementui/index.css">
	<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../css/style.css">
	<!-- 引入组件库 -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="../js/vue.js"></script>
	<script src="../plugins/elementui/index.js"></script>
	<script src="../js/axios-0.18.0.js"></script>
	<style>
		.datatable {
			position: relative;
			box-sizing: border-box;
			-webkit-box-flex: 1;
			width: 100%;
			max-width: 100%;
			font-size: 14px;
			color: rgb(96, 98, 102);
			overflow: hidden;
			flex: 1 1 0%;
		}
		
		.datatable td, .datatable th {
			padding: 12px 0;
			min-width: 0;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			text-overflow: ellipsis;
			vertical-align: middle;
			position: relative;
			text-align: left;
		}
	</style>
</head>
<body class="hold-transition">
<div id="app">
	<div class="content-header">
		<h1>系统设置<small>角色管理</small></h1>
		<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统设置</el-breadcrumb-item>
			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
	<div class="app-container">
		<div class="box">
			<div class="filter-container">
				<el-input placeholder="角色名称/关键字" v-model="pagination.queryString" style="width: 200px;"
				          class="filter-item" @keyup.enter.native="handleFilter"></el-input>
				<el-button @click="_findPage()" class="dalfBut">查询</el-button>
				<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
			</div>
			<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column prop="name" label="角色名称" align="center"></el-table-column>
				<el-table-column prop="keyword" label="关键字" align="center"></el-table-column>
				<el-table-column prop="description" label="描述" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-container">
				<el-pagination
						class="pagiantion"
						@current-change="handleCurrentChange"
						:current-page="pagination.currentPage"
						:page-size="pagination.pageSize"
						layout="total, prev, pager, next, jumper"
						:total="pagination.total">
				</el-pagination>
			</div>
			<!-- 新增标签弹层 -->
			<div class="add-form">
				<el-dialog title="新增角色" :visible.sync="dialogFormVisible">
					<template>
						<el-tabs v-model="activeName" type="card">
							<el-tab-pane label="基本信息" name="first">
								<el-form label-position="right" label-width="100px">
									<el-row>
										<el-col :span="12">
											<el-form-item label="名称">
												<el-input v-model="formData.name"/>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="关键字">
												<el-input v-model="formData.keyword"/>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="24">
											<el-form-item label="说明">
												<el-input v-model="formData.description" type="textarea"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-tab-pane>
							<el-tab-pane label="权限信息" name="second">
								<div class="checkScrol">
									<table class="datatable">
										<thead>
										<tr>
											<th>选择</th>
											<th>权限名称</th>
											<th>权限关键字</th>
											<th>权限描述</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="c in tableData">
											<td>
												<input :id="c.id" v-model="permissionIds" type="checkbox" :value="c.id">
											</td>
											<td><label :for="c.id">{{c.name}}</label></td>
											<td><label :for="c.id">{{c.keyword}}</label></td>
											<td><label :for="c.id">{{c.description}}</label></td>
										</tr>
										</tbody>
									</table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="菜单信息" name="th">
								<div class="checkScrol">
									<table class="datatable">
										<thead>
										<tr>
											<th>选择</th>
											<th>菜单名</th>
											<th>菜单等级</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="m in menuData">
											<td>
												<input :id="m.id" v-model="menuIds" type="checkbox" :value="m.id">
											</td>
											<td><label :for="m.id">{{m.title}}</label></td>
											<td><label :for="m.id">{{m.level}}</label></td>
										</tr>
										</tbody>
									</table>
								</div>
							</el-tab-pane>
						</el-tabs>
					</template>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取消</el-button>
						<el-button type="primary" @click="handleAdd()">确定</el-button>
					</div>
				</el-dialog>
			</div>
			
			<!-- 编辑标签弹层 -->
			<div class="add-form">
				<el-dialog title="编辑角色信息" :visible.sync="dialogFormVisible4Edit">
					<template>
						<el-tabs v-model="activeName" type="card">
							<el-tab-pane label="基本信息" name="first">
								<el-form label-position="right" label-width="100px">
									<el-row>
										<el-col :span="12">
											<el-form-item label="名称">
												<el-input v-model="formData.name"/>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="关键字">
												<el-input v-model="formData.keyword"/>
											</el-form-item>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="24">
											<el-form-item label="说明">
												<el-input v-model="formData.description" type="textarea"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-tab-pane>
							<el-tab-pane label="权限信息" name="second">
								<div class="checkScrol">
									<table class="datatable">
										<thead>
										<tr>
											<th>选择</th>
											<th>权限名称</th>
											<th>权限关键字</th>
											<th>权限描述</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="c in tableData">
											<td>
												<input :id="c.id" v-model="permissionIds" type="checkbox" :value="c.id">
											</td>
											<td><label :for="c.id">{{c.name}}</label></td>
											<td><label :for="c.id">{{c.keyword}}</label></td>
											<td><label :for="c.id">{{c.description}}</label></td>
										</tr>
										</tbody>
									</table>
								</div>
							</el-tab-pane>

							<el-tab-pane label="菜单信息" name="th">
								<div class="checkScrol">
									<table class="datatable">
										<thead>
										<tr>
											<th>选择</th>
											<th>菜单名</th>
											<th>菜单等级</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="m in menuData">
											<td>
												<input :id="m.id" v-model="menuIds" type="checkbox" :value="m.id">
											</td>
											<td><label :for="m.id">{{m.title}}</label></td>
											<td><label :for="m.id">{{m.level}}</label></td>
										</tr>
										</tbody>
									</table>
								</div>
							</el-tab-pane>

						</el-tabs>
					</template>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
						<el-button type="primary" @click="handleEdit()">确定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</div>
</body>

<script>
	var vue = new Vue({
		el: '#app',
		data: {
			activeName: 'first',//添加/编辑窗口Tab标签名称
			pagination: {//分页相关属性
				currentPage: 1,
				pageSize: 10,
				total: 100,
				queryString: null,
			},
			dataList: [],//列表数据
			formData: {},//表单数据
			tableData: [],//新增和编辑表单中对应的检查项列表数据
			menuData:[],
			menuIds:[],
			permissionIds: [],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
			dialogFormVisible: false,//控制添加窗口显示/隐藏
			dialogFormVisible4Edit: false,//控制编辑窗口显示/隐藏
			backendUrl: "http://localhost:82"
		},
		created() {
			this.findPage();
		},
		methods: {
			//修改
			/**
			 * 步骤：
			 *  1. 发送ajax请求，数据：检查组基本信息， 选中的检查项id
			 *  2. 关闭弹框
			 *  3. 重新查询
			 *  4. 消息提示
			 */
			handleEdit() {
				//1. 发送ajax请求，数据：检查组基本信息， 选中的检查项id
				axios.post(this.backendUrl + "/role/edit.do?permissionIds=" + this.permissionIds+"&menuIds="+this.menuIds, this.formData).then((res) => {
					//2. 关闭弹框
					this.dialogFormVisible4Edit = false;
					//3. 重新查询
					this.findPage();
					//4. 消息提示
					this.$message({
						message: res.data.message,
						type: res.data.flag ? "success" : "error"
					});
				}).catch((err) => {
					console.log(err);
				});


			},
			//添加
			/**
			 * 步骤：
			 *      1. 发送ajax请求，提交 检查组的基本信息， 选中的检出项的id
			 *      2. 请求完成后
			 *          2.1 消息提示
			 *          2.2 关闭弹窗
			 *          2.3 重新查询
			 *
			 */
			handleAdd() {

				//检查组的基本信息， 选中的检查项的id
				/**
				 * 方法二：通过路径传参
				 *          表单数据只能使用post提交
				 *          数组数据可以路径传参
				 */

				axios.post(this.backendUrl + "/role/add.do?permissionIds=" + this.permissionIds+"&menuIds="+this.menuIds, this.formData).then((res) => {
					// 2.1 消息提示

					this.$message({
						message: res.data.message,
						type: res.data.flag ? "success" : "error"
					});
					// 2.2 关闭弹创建
					this.dialogFormVisible = false;
					// 2.3 重新查询
					this.findPage();
				}).catch((err) => {
					console.log(err);
				});
			},
			_findPage() {
				if (this.pagination.queryString != null && this.pagination.queryString.length > 0) {
					this.pagination.currentPage = 1;
				}
				this.findPage();
			},

			//分页查询
			findPage() {
				//1.封装参数
				var param = {
					currentPage: this.pagination.currentPage,
					pageSize: this.pagination.pageSize,
					queryString: this.pagination.queryString
				};
				//2. 发送请求
				axios.post(this.backendUrl + "/role/findPage.do", param).then((res) => {
					this.dataList = res.data.rows;
					this.pagination.total = res.data.total;
				}).catch((err) => {
					console.log(err);
				});
			},
			// 重置
			/**
			 * 1. 重置基本信息
			 * 2. 设置默认的标签页
			 * 3. 清除选中检查项
			 *
			 */
			resetForm() {
				this.formData = {};
				this.activeName = "first";
				this.permissionIds = []
			},
			//新增 数据回显的方法
			/**
			 * 1. 弹出窗口
			 * 2. 重置表单
			 * 3. 发送ajax请求，查询所有的检查项
			 */
			handleCreate() {
				//1. 弹出窗口
				this.dialogFormVisible = true;
				//2. 重置表单
				this.resetForm();
				//发送ajax请求，查询所有的权限
				axios.get(this.backendUrl + "/permission/findAll.do").then((res) => {
					this.tableData = res.data.data;
				}).catch((err) => {
					console.log(err);
				});
				axios.get(this.backendUrl + "/menu/findAll.do").then((res) => {
					// alert(res.data.data[0].title)
					this.menuData = res.data.data;
				}).catch((err) => {
					console.log(err);
				});

			},
			//编辑检查组数据回显
			/**
			 * 1. 获取id
			 * 2. 弹出编辑窗口
			 * 3. 重置
			 * 4. 发送ajax请求
			 *          查询该检查组的基本信息， 查询所有的检查项信息， 查询检查组对应的检查项的id
			 * @param row  表格的行数据，包含 检查组id
			 */
			handleUpdate(row) {
				//1.获取id
				var id = row.id;
				//2弹出编辑窗口
				this.dialogFormVisible4Edit = true;
				//3.重置
				this.resetForm();
				// axios.get(this.backendUrl + "/menu/findAll.do").then((res) => {
				// 	// alert(res.data.data[0].title)
				// 	this.menuData = res.data.data;
				// }).catch((err) => {
				// 	console.log(err);
				// });
				//4. 发送ajax请求
				//查询该检查组的基本信息
				axios.get(this.backendUrl + "/role/findById.do?id=" + id).then((res) => {
					this.formData = res.data.data;

					//查询所有角色并会显
					axios.get(this.backendUrl + "/menu/findAll.do").then((res) => {
						// alert(res.data.data[0].title)
						this.menuData = res.data.data;
						axios.get(this.backendUrl + "/menu/findByRoleId.do?id="+id).then((res) => {
							// alert(res.data.data[0].title)
							this.menuIds = res.data.data;
						}).catch((err) => {
							console.log(err);
						});
					}).catch((err) => {
						console.log(err);
					});

					//查询所有的检查项信息
					axios.get(this.backendUrl + "/permission/findAll.do").then((res) => {
						this.tableData = res.data.data;
						//查询检查组对应的检查项的id
						axios.get(this.backendUrl + "/role/findPermissionIdsByRoleId.do?id=" + id).then((res) => {
							this.permissionIds = res.data.data;
						}).catch((err) => {
							console.log(err);
						});
					}).catch((err) => {
						console.log(err);
					});
				}).catch((err) => {
					console.log(err);
				});


			},
			//切换页码
			handleCurrentChange(currentPage) {
				this.pagination.currentPage = currentPage;
				this.findPage();
			},
			// 删除
			handleDelete(row) {
				//获取id
				var id = row.id;
				this.$confirm('确定删除该角色?', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//3. 点击确定，发送ajax请求，根据id删除
					axios.get(this.backendUrl + "/role/delete.do?id=" + id).then((res) => {
						//重新查询
						this.findPage();
						//消息提示
						if (res.data.flag) {
							this.$message({
								message: res.data.message,
								type: "success"
							});
						} else {
							this.$message({
								message: res.data.message,
								type: "error"
							});
						}
					}).catch((err) => {
						console.log(err);
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	})
</script>
</html>
